<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>任务三</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="body">
        <div class="left">
           <div class="logo">
                <p>团队logo<br/>80*80</p>
           </div>
            <p>团队名称</p>
        </div>
        <div class="right">
            <div class="img">
                <p>个人Logo<br/>80*80</p>
            </div>
            <div class="img">
                <p>个人Logo<br/>80*80</p>
            </div>
            <div class="img">
                <p>个人Logo<br/>80*80</p>
            </div>
            <div class="img">
                <p>个人Logo<br/>80*80</p>
            </div>
        </div>
        <div class="center">
            <h3>
                任务目标
            </h3>
            <ul>
                <li>掌握HTML/CSS布局的概念</li>
                <li>掌握盒模型的概念</li>
                <li>掌握position与float的概念以及在布局时的用法</li>
            </ul>
            <h3>
                任务描述
            </h3>
            <ul>
                <li>使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。</li>
                <li>左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。
                    背景色为 #eee 区域的高度取决于三个子元素中最高的高度。</li>
            </ul>
            <h3>
                任务注意事项
            </h3>
            <ul>
                <li>尝试 position 和 float 的效果，思考它们的异同和应用场景。</li>
                <li>注意测试不同情况，尤其是极端情况下的效果。</li>
            </ul>
        </div>
    </div>
</body>
</html>